<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!-- HTML5文档头 -->
<!DOCTYPE html>
<!-- lang="zh-cn"，此网页基本是中文内容 -->
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--<link rel="shortcut icon" href=""/>-->
		<!-- 强大的CSS Reset库 -->
		<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
		<%@include file="/views/common/import.jspf"%>
		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
	</head>
	<body>
		<%@include file="/views/common/header.jspf" %>
		<div class="banner" style="background:url(${ctx}/static/${blog.bgImage})">
			<h1 class="blogname">${blog.name}</h1>
			<p>${blog.description}</p>
		</div>
		
		<section class=" container content">
			<div class="col-md-8 col-sm-12 col-xs-12">
				<ul class="clearfix">
					<li class="list clearfix">
						<div class="list-tit ">
							<h2>${article.title }</h2>
							<p class="item1">
								<span class="glyphicon glyphicon-th-large"></span><span class="classify">分类:${article.categoryName }</span>
								<span class="glyphicon glyphicon-time"></span><span class="introduce-time">发布时间：${article.createTime }</span>
								<span class="glyphicon glyphicon-heart"></span><span class="read">阅读次数(<span class="read-more">${article.readTimes }</span>)</span>
							</p>
							<p>${article.content }</p>
							<p>但最后还是坚持了下来，时间如此匆匆，等再回过头已来不及去弥补… 其实蛮遗憾的，话说这四年，并不是很专注于它，起初的建立是因为“面子”，一个网页设计师怎能没有一个属于自己的博客网站，域名几番斟酌选了yangqq(唯一用心的选了域名)，选好后，草草的用了两天时间，设计了一个简单的博客模板，接下来用了漏洞百出的asp程序(自己瞎改)，从网上copy了很多文章，放到网站上，就这样，我满心欢喜…博客从此也就搁置了。就像玩拼图，趁着三分热度和新奇，一鼓作气完成了，就随意的丢在犄角旮旯了，再也没有兴趣…
							</p>
							<div class="blog-img1">
								<img src="${ctx }/static/common/images/bb9e1b25215426d6c375e453c756f136.jpg" />
							</div>
							<p>直到我要利用它，博客搭建半年的时间，更新一两次，但是文章都乱七八糟，不是原创，偶尔会写写心情。从内容上来说，还是可以了。就这样，我骄傲的自以为是，拿着这样一个博客网站还有曾经做过的企业政府网站案例去朋友推荐的大公司应聘，最后我被无情的拒绝了，好在他们的技术人员也认真看了我的博客，告知我应该多注重div，css…其实我也有点儿不服气，甚至有点儿恼羞成怒，对他们说，“我诚心加入，既然你们不需要，那这就是你们的损失！” </p>
							<p> 那一次应聘，给了我狠狠的一击，也就这样，我删掉了曾经被我copy过来的文章，重新开始…不再那么自以为是，认认真真的研究，做好每一次的案例。两年的时间，博客也有些起色和人气…</p>
							<p>
								虽说我这博客起初搭建一分钱没花，但这么长时间了，渐渐有了想再利用它赚钱的想法，放了一些联盟广告，因为访问量不高，收入非常可怜，甚至是没有点击量！干脆就撤了广告，再后来，注重优化，目的还是拉广告，效果也很好，收到了好多email，5块钱一个广告文字链接，一个月的广告收入不到60块钱，自诩有人看得上也不错了，可是再怎么审核的链接，跟博客类型不一样，同样属于垃圾链接，就这样的恶性循环，我的网站被百度降权，整整一个月都没有排名... </p>
						</div>
					</li>
				</ul>
				<div class="row">
					<ul class="list-group" id="comment">
						<li class="list-group-item active">评论列表</li>
							<c:if test="${empty discussList}">
								<li class="list-group-item"><div class="media">并没有人鸟你！！</div>	</li>
							</c:if>
					<c:forEach items="${discussList }" varStatus="v " var="discuss">
						<li class="list-group-item">
							<div class="media">
								<a class="pull-left" href="#">
									<img class="media-object" src="${ctx }/static/${discuss.userPhoto }">
								</a>
								<div class="media-body">
									<h4 class="media-heading">${discuss.userName }</h4>
									<p>${discuss.content }</p>
									<p class="item">
										<span class="introduce-time">${fn:substring(discuss.createTime,0,19) }</span>
										<span class="reply"><a href="#">回复(0)</a></span>
								</div>
							</div>
						</li>
						</c:forEach>
				
					</ul>
					<form  method="post" id="commentForm">
						<div id="keke">
							<input type="hidden" value="${user.id }" name="userId"/>
							<input type="hidden" value="${article.id }" name="articleId"/>
						</div>
						<div class="form-group">
							<input type="text" class="form-control comment" placeholder="请发表评论" name="content" id="discuss_content">
						</div>
						<c:if test="${!empty user }">
						<input type="button" onclick="discuss()"class="btn btn-primary btn-block" value="发表"/>
						</c:if>
						<c:if test="${empty user }">
						<button class="btn btn-default btn-block" >请先登录</button>
						</c:if>
					</form>
				</div>
			</div>
			<div class="col-md-4 col-sm-12 col-xs-12 r-con">
				<ul class="list-group">
				<li class="list-group-item active">阅读排行</li>
				<c:forEach items="${articleList }" var="article" varStatus="v">
						<li class="list-group-item">${v.count }、${fn:substring(article.title, 0, 10) }<span class="badge">${article.readTimes }</span></li>
				</c:forEach>
				</ul>
				<ul class="list-group">
					<li class="list-group-item active">文章分类</li>
					<li class="list-group-item"><a href="#">全部博文 </a><span class="badge">${sum} </span></li>
					<c:forEach items="${categoryList}" var="category" varStatus="v">
					<li class="list-group-item"><a href="#">${category.categoryName}</a><span class="badge">${category.categorySum} </span></li>
					</c:forEach>
				</ul>
			</div>

		</section>
		<script>
		function discuss(){
			$.post("${ctx}/blog/addDiscuss",$("#commentForm").serialize(),function(data){
				if(data){
				var html=[];
				html.push('<li class="list-group-item">');
		        html.push('   <div class="media">');
		        html.push('      <a class="pull-left" href="#">');
		        html.push('         <img class="media-object" src="${ctx }/static/${user.photo }">');
		        html.push('      </a>');
		        html.push('      <div class="media-body">');
		        html.push('         <h4 class="media-heading">${user.username }</h4>');
		        html.push('         <p>'+$("#discuss_content").val()+'</p>');
		        html.push('         <p class="item">');
		        html.push('         <span class="introduce-time">'+(new Date()).substring(0,12)+'</span>');
		        html.push('         <span class="reply"><a href="#">回复(0)</a></span>');
		        html.push('       </div>');
		        html.push('    </div>');
		        html.push('</li>');			
		        $('#comment').append(html.join(''));
				}else{
					alert("评价失败！");
				}
			})

		}
		
		
		</script>
	</body>

</html>